<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- <link rel="stylesheet" type="text/css" href="../css/reset.css"/> -->
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}

			.nav {
				width: 960px;
				margin: 100px auto;
				/* 去掉小圆点 */
				list-style: none;
				border: 1px solid red;
			}

			.nav .main_menu {
				width: 120px;
				height: 40px;
				float: left;
				/* 文字水平居中 */
				text-align: center;
				/* 垂直居中 */
				line-height: 40px;

				position: relative
			}

			.nav .main_menu>a {
				/*a是行内元素,这里转换为块级元素就可以设置宽高*/
				/*虽然这里把a标签转换为块级元素,独占的一行是父容器li的,不是body一行*/
				display: block;
				width: 120px;
				height: 40px;
			}

			.nav .main_menu>a:link,
			.nav .main_menu>a:visited {
				/* 去掉下划线 */
				text-decoration: none;
				background-color: yellowgreen;
				/* 改变字体颜色 */
				color: white;
			}

			.nav .main_menu>a:hover {
				background-color: rgb(128, 0, 128);
				color: yellow;
				/* 字体加粗 */
				font-weight: bold;
			}

			.clear {
				clear: left;
			}

			.nav .sub_menu {
				display: none;
				position: absolute;
				left: 0;
				top: 40px;
				list-style: none;
				width: 120px;
			}

			.nav .main_menu:hover .sub_menu {
				display: block;
			}
			.nav .sub_menu a {
				text-decoration: none;
			}
			.nav .sub_menu li {
				background-color: greenyellow;
				color: #fff;
			}
			.nav .sub_menu li:hover {
				background-color: gold;
				color: #fff;
			}
		</style>
	</head>
	<body>
		<ul class="nav">
			<li class="main_menu">
				<a href="#1">网站导航</a>
				<ul class="sub_menu">
					<li><a href="#">二级导航</a></li>
					<li><a href="#">二级导航</a></li>
					<li><a href="#">二级导航</a></li>
					<li><a href="#">二级导航</a></li>
				</ul>
			</li>
			<li class="main_menu">
				<a href="#1">网站导航</a>
				<ul class="sub_menu">
					<li><a href="#">二级导航</a></li>
					<li><a href="#">二级导航</a></li>
					<li><a href="#">二级导航</a></li>
					<li><a href="#">二级导航</a></li>
				</ul>
			</li>
			<li class="main_menu">
				<a href="#1">网站导航</a>
				<ul class="sub_menu">
					<li><a href="#">二级导航</a></li>
					<li><a href="#">二级导航</a></li>
					<li><a href="#">二级导航</a></li>
					<li><a href="#">二级导航</a></li>
				</ul>
			</li>
			<li class="main_menu">
				<a href="#1">网站导航</a>
				<ul class="sub_menu">
					<li><a href="#">二级导航</a></li>
					<li><a href="#">二级导航</a></li>
					<li><a href="#">二级导航</a></li>
					<li><a href="#">二级导航</a></li>
				</ul>
			</li>
			<li class="main_menu">
				<a href="#1">网站导航</a>
				<ul class="sub_menu">
					<li><a href="#">二级导航</a></li>
					<li><a href="#">二级导航</a></li>
					<li><a href="#">二级导航</a></li>
					<li><a href="#">二级导航</a></li>
				</ul>
			</li>
			<li class="main_menu">
				<a href="#1">网站导航</a>
				<ul class="sub_menu">
					<li><a href="#">二级导航</a></li>
					<li><a href="#">二级导航</a></li>
					<li><a href="#">二级导航</a></li>
					<li><a href="#">二级导航</a></li>
				</ul>
			</li>
			<li class="main_menu">
				<a href="#1">网站导航</a>
				<ul class="sub_menu">
					<li><a href="#">二级导航</a></li>
					<li><a href="#">二级导航</a></li>
					<li><a href="#">二级导航</a></li>
					<li><a href="#">二级导航</a></li>
				</ul>
			</li>
			<li class="main_menu">
				<a href="#1">网站导航</a>
				<ul class="sub_menu">
					<li><a href="#">二级导航</a></li>
					<li><a href="#">二级导航</a></li>
					<li><a href="#">二级导航</a></li>
					<li><a href="#">二级导航</a></li>
				</ul>
			</li>
			<div class="clear"></div>
		</ul>

	</body>
</html>
